<template>
<div class="big_left-3">
  <blockTitle title="监督动态"></blockTitle>
  <div class="main">
    <div class="main-top">
      <div :class="tabIndex===index?'main-top-1 active':'main-top-1'" v-for="(item,index) in tabList" @click="handleChange(index)">
        {{ item.name }}
      </div>
    </div>
  </div>
</div>
</template>

<script>
import blockTitle from './big-title'
export default {
  name: "left-1",
  components: {
    blockTitle
  },
  data() {
    return {
      tabIndex: 0,
      tabList: [
        { name: '钻井' },
        { name: '试油（气）' },
        { name: '测井' },
        { name: '录井' },
      ]
    }
  },
  methods: {
    handleChange(index) {
      this.tabIndex = index;
    }
  }
}
</script>

<style scoped lang="scss">
.big_left-3 {
  height: 30%;
  .main {
    width: 100%;
    height: calc(100% - 20px);
    background: url("../../assets/images/big_left_bg.png");
    background-size: 100% 100%;
    .main-top {
      padding: 20px;
      display: flex;
      .main-top-1 {
        width: 82px;
        height: 23px;
        line-height: 23px;
        text-align: center;
        margin-right: 10px;
        background: url("../../assets/images/big_tag_bg.png");
        background-size: 100% 100%;
        color: #0FABF6;
        cursor: pointer;
        &.active {
          background: url("../../assets/images/big_tag_bg_active.png");
          background-size: 100% 100%;
          color: #FFCB2B;
        }
      }
    }
  }

}
</style>
